<template>
  <div class="table-Container">
    <el-form :model="form" :rules="rulesForm" ref="form" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="val">
          <el-form-item label="地址:" prop="address">
            <el-input v-model="form.address" clearable size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="val">
          <el-form-item label="颜色:" prop="color">
            <el-select v-model="form.color" clearable size="small">
              <el-option
                v-for="item in colorList"
                :key="item.value"
                :value="item.label"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="val">
          <el-form-item label="名称:" prop="names">
            <el-autocomplete
              size="small"
              clearable
              v-model="form.names"
              :fetch-suggestions="fetchName"
              placeholder="有输入建议"
            >
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="val">
          <el-form-item>
            <el-button type="primary" size="small" @click.stop="handleSearch">查询</el-button>
            <el-button size="small" @click.stop="handleReset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <tableSlot
      :list="tableList"
      :columns="columns"
      :defaultSort="defaultSort"
      @sortChange="sortChange"
      @cellDblclick="cellDblclick"
    >
      <el-table-column slot="operation" label="操作" width="180px">
        <template slot-scope="{ scope }">
          <el-button size="mini" type="primary">编辑</el-button>
          <el-button size="mini">查看</el-button>
        </template>
      </el-table-column>
    </tableSlot>
    <pagination :pageObj="pageObj" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
    </pagination>
  </div>
</template>
<script>
import { list, columns } from './config'
import { throttle } from '@/utils/index'
export default {
  name: 'tableDemo2',
  components: {
    tableSlot: () => import('@/components/tableSlot/index.vue'),
    pagination: () => import('@/components/pagination/index.vue'),
  },
  data() {
    return {
      form: {
        address: '',
        color: '',
        names: '',
      },
      rulesForm: {
        address: { required: false, message: '请输入', trigger: 'blur' },
        color: {
          required: false,
          message: '请选择',
          trigger: ['blur', 'change'],
        },
        names: { required: false, message: '请输入', trigger: 'blur' },
      },
      colorList: [
        { value: '1', label: '白色' },
        { value: '2', label: '红色' },
        { value: '3', label: '黄色' },
      ],
      nameLists: [],
      tableList: [],
      list,
      columns,
      pageObj: {
        page: 1,
        size: 10,
        total: 100,
      },
      defaultSort: { prop: 'date', order: 'ascending' },
      val: 4,
    }
  },
  created() {
    this.tableList = this.list
    this.handleSearch()
  },
  mounted() {},
  watch: {},
  methods: {
    // 查询
    handleSearch() {
      const { form } = this
      let searchSddress = []
      let searchName = []
      let searchColor = []
      this.list.map((item) => {
        if (form.address && item.address === form.address) {
          searchSddress.push(item)
        } else if (form.address === '') {
          searchSddress.push(item)
        }
      })
      searchSddress.forEach((item) => {
        if (form.names && item.names === form.names) {
          searchName.push(item)
        } else if (form.names === '') {
          searchName.push(item)
        }
      })
      searchName.forEach((item) => {
        if (form.color && item.color === form.color) {
          searchColor.push(item)
        } else if (form.color === '') {
          searchColor.push(item)
        }
      })
      this.tableList = searchColor
      this.pageObj.total = this.tableList.length
    },
    // 重置
    handleReset() {
      this.$refs.form.resetFields()
    },
    fetchName(nameString, cb) {
      this.nameLists = this.list.map((item) => {
        return { value: item.names, name: item.address }
      })
      if (nameString === undefined) nameString = ''
      let result = nameString ? this.nameLists.filter(this.createFilter(nameString)) : this.nameLists
      cb(result)
    },
    createFilter(nameString) {
      return (nameList) => {
        return nameList.value.toLowerCase().match(nameString.toLowerCase())
      }
    },
    handleSizeChange(row) {
      console.log('改变页数为', row)
    },
    handleCurrentChange(row) {
      console.log('前往', row)
    },
    // 排序事件
    sortChange(column, prop, order) {
      console.log('column, prop, order', column, prop, order)
    },
    // 双击表格事件
    cellDblclick(row) {
      console.log('row', row)
    },
  },
}
</script>
<style scoped lang="scss">
.table-Container {
  width: 100%;
  height: 100%;
  padding: 10px;
  margin: 0;
  .el-form-item {
    display: flex;
  }
}
::v-deep {
  .el-form-item__content {
    margin: 0 !important;
  }
  .el-table {
    overflow-y: auto;
    .el-table__header {
      height: 50px;
    }
    tr {
      height: 50px;
    }
  }
  .el-table--border th:first-child .cell {
    padding: 0;
  }
}
</style>
